<template>
  <div class="homePage">
    <infoText ref="infoText"></infoText>
    <div class="partBg">
      <img src="./img1/img8.png" class="imageA1" />
      <img src="./img1/img3.png" class="image1" />
    </div>
    <div class="partA">
      <div class="part1">
        <img src="./img1/img1.png" class="image2" />
      </div>
      <div class="part2">
        <div class="part21">领电子社保卡</div>
        <div>赢微信立减金</div>
      </div>
      <div class="part3">
        <img src="./img1/img2.png" class="image3" />
      </div>
      <div class="part4">
        <img src="./img1/img4.png" class="image4" />
      </div>

      <div class="part6">
        <img src="./img1/img6.png" class="image6" />
        <div class="part61">{{ luckMsg }}</div>
        <canvas
          id="iCanvas"
          class="iCanvas"
          @touchstart="canvasStart"
          @touchmove="canvasMove"
          @touchend="canvasEnd"
          @mousedown="canvasStart"
          @mousemove="canvasMove1"
          @mouseup="canvasEnd"
        ></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import Ctx2 from '../../assets/js/ctx2'
import $util from '../../utils'

export default {
  data() {
    return {
      canva: null,
      ctx2: null,
      isMove: false,
      iCan: {
        width: 0,
        height: 0,
      },
      image1Mask: require('./img1/img12.png'),
      bigWrap: null,
      luckMsg: '恭喜获得1元立减金',
      luckText: '刮我中大奖',
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '刮奖送好礼',
    })
    this.canva = document.querySelector('#iCanvas').querySelector('canvas')
    this.ctx2 = new Ctx2(this.canva.getContext('2d'))

    this.bigWrap = document.querySelector('#iCanvas').getBoundingClientRect()
    this.canva.width = this.bigWrap.width
    this.iCan.width = this.bigWrap.width
    this.canva.height = this.bigWrap.height
    this.iCan.height = this.bigWrap.height
    this.canvasHandle(this.bigWrap.width, this.bigWrap.height)

    try {
      let qData = $util.urlQuery('qd')
      if (qData) {
        let obj1 = JSON.parse(qData)
        this.luckText = obj1.text
      }
    } catch (error) {}
  },
  methods: {
    canvasHandle(width, height) {
      this.ctx2.loadImg(this.image1Mask).then((res) => {
        this.ctx2
          .imgFill(res, 0, 0, width, height)
          .textFill(this.luckText, width / 2, height / 2, ['#F4526A', 47 / 2 + 'px bold'])
      })
    },
    canvasStart(e) {
      e.preventDefault()
      this.isMove = true
    },
    canvasMove(e) {
      e.preventDefault()
      if (!this.isMove) return
      this.canvasAnima(e.changedTouches[0].x, e.changedTouches[0].y)
    },
    canvasMove1(e) {
      e.preventDefault()
      if (!this.isMove) return
      this.canvasAnima(e.clientX - this.bigWrap.left, e.clientY - this.bigWrap.top)
    },
    canvasEnd() {
      this.isMove = false
      let percent = this.ctx2.getEmptyPx(this.iCan.width, this.iCan.height)
      if (percent >= 40) {
        this.ctx2.clearRect(0, 0, this.iCan.width, this.iCan.height)
        this.$refs.infoText.show()
      }
    },
    canvasAnima(winX, winY) {
      this.ctx2.clearArcFun(winX, winY, 20)
    },
  },
}
</script>

<style lang="scss" scoped>
.homePage {
  background: url('./img1/img15.png') 0 100% / 100% 257.54rpx, url('./img1/img13.png') 100% 82% / 136.37rpx 143.06rpx,
    url('./img1/img14.png') 0 82% / 136.94rpx 143.06rpx, url('./img1/img7.png') 0 100% / 100% 313rpx;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}
.partBg {
  position: relative;
}
.imageA1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 378rpx;
}
.image1 {
  position: absolute;
  top: 154rpx;
  left: 0;
  width: 100%;
  height: 816.37rpx;
}
.partA {
  position: relative;
}
.part1 {
  padding-top: 115rpx;
  text-align: center;
  margin-bottom: 12rpx;
}
.image2 {
  width: 294rpx;
  height: 31rpx;
}
.part2 {
  text-align: center;
  font-size: 70rpx;
  line-height: 1;
  color: #fff;
  margin-bottom: 400rpx;
  font-weight: bold;
  letter-spacing: 20rpx;
}
.part21 {
  margin-bottom: 10rpx;
}
.part3 {
  display: flex;
  justify-content: flex-end;
}
.image3 {
  width: 100.38rpx;
  height: 96.64rpx;
}
.part4 {
  position: absolute;
  top: 624rpx;
  right: 26rpx;
  width: 49.64rpx;
  height: 39.33rpx;
}
.image4 {
  width: 100%;
  height: 100%;
}
.part5 {
  width: 690rpx;
  height: 80rpx;
  margin: 0 auto 20rpx;
}
.image5 {
  width: 100%;
  height: 100%;
}
.part6 {
  width: 708rpx;
  height: 335rpx;
  margin: 0 auto;
  margin-bottom: 30rpx;
  position: relative;
}
.image6 {
  width: 100%;
  height: 100%;
}
.part61 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 708rpx;
  height: 335rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 47rpx;
}
.iCanvas {
  position: absolute;
  top: 20rpx;
  left: 32rpx;
  width: 646rpx;
  height: 291rpx;
}
.canHide {
  opacity: 0;
  left: -100vw;
}
.part6A {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #f4526a;
  font-size: 47rpx;
  line-height: 1;
}
.part6A1 {
  font-size: 24rpx;
  margin-top: 20rpx;
  color: #999;
}
</style>
